import { onMounted, onUnmounted, ref, Ref } from 'vue'
const useClickOutside = (elementRef: Ref<null | HTMLElement>): Ref<boolean> => {
  const isClickOutside = ref(false)
  const handleMouseClick = (e: MouseEvent) => {
    if (elementRef.value?.contains(e.target as HTMLElement)) {
      isClickOutside.value = false
    } else {
      isClickOutside.value = true
    }
  }
  onMounted(() => {
    document.addEventListener('click', handleMouseClick)
  })
  onUnmounted(() => {
    document.removeEventListener('click', handleMouseClick)
  })
  return isClickOutside
}
export default useClickOutside
